<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background:#0A0F23;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="vbarChart" style="width:100%;height:100%;"></div>
    <script src="../components/echarts-4.0.4.min.js"></script>
    <script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));

        var dataMap = {};

        dataMap.dataVisit = {
            //次数
            2013: [28,30,21,39],
            2014: [15,16,41,44],
            2015: [23,30,35,41],
            2016: [17,35,38,32],
            2017: [23,20,7,25],
            //到访人数
            1: [148, 287, 157,340],
            2: [186,234, 713, 335],
            3: [232,250, 190, 570],
            4: [254,193,395,374],
            5: [186,363,464,346]
        };

        var barOption = {
            baseOption: {
                timeline: {
                    show: false,
                    axisType: 'category',
                    loop: true,
                    autoPlay: true,
                    playInterval: 1000,
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        position: 14
                    },
                    lineStyle: {
                        color: '#fff'
                    },
                    controlStyle: {
                        show: false
                    },
                    top: 0,
                    data: [
                       '2013','2014','2015',' 2016', '2017'
                    ]
                },
                legend: {
                	show:true,
                    left: '5%',
                    top:'10%',
                    data: ['区域', '行业'],
                    textStyle: {
                        color: '#fff',
                        fontSize:12
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    top:'25%',
                    containLabel: true
                },
                backgroundColor: '#0A0F23',
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        data: ['技术开发','技术转让','技术咨询','技术服务']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 50,
                          nameTextStyle: {
                            "color": "#AEA4A8",
                             verticalAlign:'bottom'
                          },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                color: '#fff',
                                fontSize: 16
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            textStyle: {
                                color: '#fff',
                                fontSize:16
                            }
                        },
                        splitLine: {
                            show: true
                        }
                    },
                    {
                        type: 'value',
                        max: 750,
                        min: 0,
                        nameTextStyle: {
                            "color": "#AEA4A8",
                            verticalAlign:'bottom'
                        },
                        //interval: 150,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                series: [
                    {name: '合同数', type: 'bar', barWidth: 50},
                    {name: '成交额', type: 'line', smooth: true}
                ]
            },
            options: [
                {
                    title: {
                        text: '2013年西安市技术合同构成',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series: [
                        {
                            data: dataMap.dataVisit['2013'],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(23,212,138,.7)',
                                    fontSize: 16
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['1'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2014年西安市技术合同构成',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2014'],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(21,212,158,.6)',
                                    fontSize: 16
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['2'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2015年西安市技术合同构成',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2015'],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(22,212,188,.8)',
                                    fontSize: 16
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['3'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2016年西安市技术合同构成',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2016'],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(25,212,218,.8)',
                                    fontSize: 16
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['4'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                },
                {
                    title: {
                        text: '2017年西安市技术合同构成',
                        left: 'center',
                        top:'7%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 22
                        }
                    },
                    series : [
                        {
                            data: dataMap.dataVisit['2017'],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(26,212,228,.8)',
                                    fontSize: 16
                                }
                            }
                        },
                        {
                            yAxisIndex: 1,
                            data: dataMap.dataVisit['5'],
                            itemStyle: {
                                normal: {
                                    color: '#e8e9ab'
                                }
                            }
                        }
                    ]
                }
            ]
        };

        vbarChart.setOption(barOption);
    </script>
</body>
</html>